import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {View, Text, Image, Pressable} from 'react-native';

const SongList = ({playList, title}) => {
  const navigation = useNavigation();
  return (
    <>
      <View
        style={{
          height: 40,
          padding: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <Text style={{color: '#666'}}>
          {title}({playList && playList.length}个)
        </Text>
        <Image
          source={require('../../assets/operation.png')}
          style={{width: 20, height: 20}}
        />
      </View>
      {playList &&
        playList.map((item) => {
          return (
            <Pressable
              onPress={() => {
                navigation.navigate('SongList', {id: item.id});
              }}
              key={item.coverImgId}
              style={{
                paddingHorizontal: 20,
                paddingVertical: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Image
                source={{uri: item.coverImgUrl}}
                style={{width: 60, height: 60}}
              />
              <View
                style={{
                  // height: 60,
                  flex: 1,
                  width: '80%',
                  marginLeft: 10,
                  justifyContent: 'center',
                }}>
                <Text
                  numberOfLines={1}
                  style={{fontSize: 16, overflow: 'hidden', flex: 1}}>
                  {item.name}
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    overflow: 'hidden',
                    flex: 1,
                    color: '#666',
                  }}>
                  播放次数:{' '}
                  {item.playCount >= 10000
                    ? String(item.playCount).slice(0, -5) + 'w'
                    : item.playCount}
                </Text>
                {/* <Text style={{overflow: 'hidden'}}>{item.description}</Text> */}
              </View>
            </Pressable>
          );
        })}
    </>
  );
};

export default SongList;
